<!--核心元模型-->
<template>
  <el-row style="height: 100vh">
    <el-col :span="5" style="height: 100%; padding-left: 10px; padding-top: 20px; border-right: 1px solid #dfe6ec; display: block">
      <customTree :ancestralId="listQuery.ancestralId" :btnTitle="'  新建目录  '" @getId="getId" :type="true" @getTree="getTree" :expandType="'1'" />
    </el-col>
    <el-drawer :title="openTableTitle" :visible.sync="nodeDrawer" :direction="direction" size="35%" :before-close="closeNodeDraw">
      <el-table :data="nodeTableInfo" style="border: 1px dashed #bbb">
        <el-table-column property="id" label="id" width="150" v-if="false"></el-table-column>
        <el-table-column property="columnName" label="英文名" width="100"></el-table-column>
        <el-table-column property="columnComment" label="中文名" width="100"></el-table-column>
        <el-table-column property="dataType" label="数据类型"></el-table-column>
        <el-table-column property="relation" label="关联字典表/字段"></el-table-column>
        <el-table-column property="valueBz" label="值域标识"></el-table-column>
      </el-table>
    </el-drawer>
    <el-col :span="17" style="margin-top: 1%; margin-left: 2%">
      <el-col :span="6">
        <span style="font-size: 30px"> 主题元数据模型 </span>
      </el-col>
      <el-col :span="17">
        <div class="text-right">
          <el-button @click="openCreate" plain type="primary"><i class="el-icon-plus"></i> 新增关联方式</el-button>
          <!-- <el-button type="primary" @click="updataClick(0)"><i class="el-icon-upload"></i> 发布</el-button> -->
          <!-- <el-button type="primary" @click="updataClick(1)"><i class="el-icon-upload" style="transform: rotate(180deg)"></i> 废止 </el-button> -->

          <!-- <el-button type="primary" @click="peizhimodel('add')"
            ><i class="el-icon-circle-plus-outline"></i> 新建模型关系</el-button
          > -->
          <el-button type="primary" @click="editpeizhimodel"><i class="el-icon-s-tools"></i> 配置模型关系</el-button>
          <!-- <el-button type="primary"
            ><i class="el-icon-download"></i> 变更记录</el-button
          > -->
          <el-button type="danger" plain @click="delClick"><i class="el-icon-delete-solid"></i> 删除</el-button>
        </div>
      </el-col>
    </el-col>
    <el-col :span="19">
      <div>
        <div id="model-graph-container" ref="graphContainer" style="width: 100%; height: 100vh"></div>
      </div>
    </el-col>

    <el-drawer :show-close="false" :visible.sync="drawer" :direction="direction">
      <zarzoaCanmodel @onIcon="onIcon" :openTitle="openTitle" :titledatalanglis="titledatalanglis" :TableId="TableId" :nodeTablelist="nodeTablelist" />
    </el-drawer>
    <createModel ref="createModel" @getlist="getTreeList" :dataCate="toAdd" />
    <configuringModelRelationships ref="opencreateModel" v-if="isbool" @emitdialogVisible="emitdialogVisible" :dialogVisible="opencreateModel" />
    <dialogVisibleview :dialogVisible="dialogVisible" :index="index" :eitdValue="eitdValue" @dologdin="dologdin" :treeList="treeList" />
  </el-row>
</template>
<style lang="scss" scoped>
//v-deep(.el-drawer.ltr, .el-drawer.rtl){
//  height: 84% !important;
//  top: 15% !important;
//}
.text-right {
  float: right;
}

#model-graph-container {
  background-image: url('../../../../assets/dataRelationBg.png');
  /* 设置背景图像的 URL */
  background-size: cover;
  /* 控制背景图像的尺寸适应容器 */
  /*background-repeat: repeat;*/
  /* 其他背景样式属性，如背景颜色、重复方式等 */
}

/* 自定义节点的样式 */
.el-tree-node__content:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

/* 自定义工具提示的样式 */
.el-tooltip__popper {
  z-index: 9999;
  /* 确保工具提示显示在顶部 */
}

#treeBox {
  margin-top: 1px;

  .el-table thead {
    display: none;
  }
}

.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}
</style>
<script>
import dialogVisibleview from '../../metaModel/model/dialogVisible.vue'
import { deletecolumn, fetchcolumnList, exportcolumn, updatecolumn } from '@/api/metadata/column'
import Import from '@/components/Import/import'
import waves from '@/directive/waves' // waves directive
import permission from '@/directive/permission/permission'
import columnForm from '../../columnForm'
import entityForm from '../../entityForm.vue'
import entityList from '../../entityList.vue'
import createModel from './child/addMetaModel.vue'
import Pagination from '@/components/Pagination'
import zarzoaCanmodel from './zarzoaCanmodel.vue'
import { deleteMasterdataDirectory, deletecaveasmodelid, deletedatacaveasmodelid } from '@/api/masterdata/masterdataDirectory'
import { fetchMasterdataTableList, fetchMasterdataDirectoryList } from '@/api/masterdata/masterdataTablelist'
import configuringModelRelationships from './configuringModelRelationships/index.vue'

import customTree from '@/components/customTree/index.vue'

import { fieldRelation, getFieldRelation, getFieldRelationDetail, getFieldRelationEdgeDetail } from '@/api/metadata/label/metadataLabel'
import { Graph } from '@antv/x6'

export default {
  name: 'columnList',
  components: {
    configuringModelRelationships,
    columnForm,
    Pagination,
    Import,
    zarzoaCanmodel,
    entityForm,
    entityList,
    createModel,
    dialogVisibleview,
    customTree,
  },
  directives: { waves, permission },
  data() {
    return {
      TableId:"",
      addDialog: false,
      toAdd: {},
      graph: null,
      openTitle: '',
      titledatalanglis: '',
      nodeTablelist: [],
      title: '',
      isbool: false,
      opencreateModel: false,
      NODE_ID_START: 0, // 新增节点id，逐次递减
      eitdValue: {},
      index: '',
      dialogVisible: false,
      drawer: false,
      edgesRelation: {},
      openTableTitle: '',
      nodeTableInfo: [],
      edgeInfo: [],
      nodeDrawer: false,
      edgeDrawer: false,
      direction: 'rtl',
      filterText: '',
      tableKey: 0,
      treeList: [],
      labelList: [],
      list: null,
      total: 0,
      multipleSelection: [],
      downloadLoading: false,
      listLoading: true,
      edgeslist: [],
      pageArray: this.$store.getters.pageArray,
      initParam: {
        // 新增参数
        name: '新增节点',
        parentId: 0,

        children: [],
      },
      listQuery: {
        columnName: undefined,
        ancestralId: '17',
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      entityQuery: {},
      currentNodekey: '',
      treeData: [],
      defaultProps: {
        // 默认设置
        children: 'children',
        label: 'name',
      },
      NODE_KEY: 'id',
      nodes: [],
      edges: [],
      newGraph: null,
      id: 'a54bcc1548dd4d96bba358ed87b86569',
      id1: 'a54bcc1548dd4d96bba358ed87b86569',
      X6List: [],
      editX6List: [],
    }
  },
  computed: {
    ids() {
      const ids = []
      this.multipleSelection.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  created() {
    localStorage.removeItem('data')
    localStorage.removeItem('date')
  },
  watch: {
    filterText(val) {
      this.$refs.SlotTree.filter(val)
    },
    list: function (newarr, oldarr) {},
  },
  methods: {
    getId(data) {
      this.listQuery.ancestralId = '17'
      this.listQuery.modelId = data.id
      this.getList()
    },
    getTree(data) {
      this.treeList = data
    },

    delClick() {
      if (this.title != '') {
        this.$confirm(`是否删除${this.title}？`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            deletedatacaveasmodelid({
              id: this.id1,
            }).then((res) => {
              if (res.data.code == 0) {
                this.$message.success(res.data.msg)
                this.getTreeList()
              }
            })
          })
          .catch(() => {})
      } else {
        this.$message('请选择目录')
      }
    },
    emitdialogVisible() {
      this.isbool = false
      this.opencreateModel = false
    },
    peizhimodel(type) {
      this.$router.push({
        path: `/metadata/metaModel/core/ConfigurationRelationships/${this.id}`,
        query: {
          type: type,
        },
      })
    },

    onIcon() {
      this.drawer = false
    },
    handleLook(_node, _data) {
      let obj = {
        id: _data.id,
        parentId: _data.parentId,
        name: _data.name,
        description: _data.description,
      }
      this.$refs.treeForm.handleLook(obj, 17)
    },
    handleDeletetree(_node, _data) {
      // 删除节点

      console.log(_node, _data)
      // 判断是否存在子节点
      if (_data.children && _data.children.length !== 0) {
        this.$message.error('此节点有子级，不可删除！')
        return false
      } else {
        // 删除操作
        let DeletOprate = () => {
          this.$nextTick(() => {
            if (this.$refs.SlotTree) {
              deleteMasterdataDirectory(_data.id).then((res) => {
                this.$message.success('删除成功！')
                this.$refs.SlotTree.remove(_data)
              })
            }
          })
        }

        // 二次确认
        let ConfirmFun = () => {
          this.$confirm('是否删除此节点？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(() => {
              DeletOprate()
            })
            .catch(() => {})
        }

        // 判断是否新增： 新增节点直接删除，已存在的节点要二次确认
        _data[this.NODE_KEY] < this.NODE_ID_START ? DeletOprate() : ConfirmFun()
      }
    },
    dologdin(item) {
      this.dialogVisible = item
      this.getList({ ...this.listQuery })
    },
    handleAdd(_node, _data) {
      // 新增节点
      console.log(_node, _data)
      // // 判断层级
      if (_node.level >= this.MAX_LEVEL) {
        this.$message.warning('当前已达到' + this.MAX_LEVEL + '级，无法新增！')
        return false
      }
      // 参数修改
      let obj = JSON.parse(JSON.stringify(this.initParam)) // copy参数
      obj.parentId = _data.id // 父id
      obj.name = ''
      obj[this.NODE_KEY] = --this.startId // 节点id：逐次递减id
      this.$refs.treeForm.handleCreate(obj, 17)
      // 判断字段是否存在
      // if(!_data.children){
      // 	this.$set(_data, 'children', [])
      // }
      // 展开节点
      // if(!_node.expanded){
      // 	_node.expanded = true
      // }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
      this.drawer = false
    },
    handleAddTop() {
      // 添加顶部节点
      let obj = JSON.parse(JSON.stringify(this.initParam)) // copy参数
      obj.parentId = 0
      obj.name = ''
      obj[this.NODE_KEY] = --this.startId // 节点id：逐次递减id
      // console.log(obj,'顶部参数')
      this.$refs.treeForm.handleCreate(obj, 17)
    },

    getG6Echarts() {
      var that = this
      if (this.graph) {
        this.graph.dispose()
      }

      const magnetAvailabilityHighlighter = {
        name: 'stroke',
        args: {
          padding: 3,
          attrs: {
            strokeWidth: 3,
            stroke: '#52c41a',
          },
        },
      }
      const container = this.$refs.graphContainer

      Graph.registerNode(
        'custom-node',
        {
          width: 300,
          height: 60,
          attrs: {
            body: {
              stroke: '#5F95FF',
              strokeWidth: 1,
              fill: '#ffffff',
              refWidth: 1,
              refHeight: 1,
            },
            image: {
              width: 36,
              height: 36,
              x: 12,
              y: 12,
            },
            title: {
              refX: 55,
              refY: 14,
              fill: 'rgba(0,0,0,0.85)',
              fontSize: 12,
              'text-anchor': 'start',
            },
            text: {
              refX: 55,
              refY: 38,
              fontSize: 12,
              fill: 'rgba(0,0,0,0.6)',
              'text-anchor': 'start',
            },
          },
          markup: [
            {
              tagName: 'rect',
              selector: 'body',
            },
            {
              tagName: 'image',
              selector: 'image',
            },
            {
              tagName: 'text',
              selector: 'title',
            },
            {
              tagName: 'text',
              selector: 'text',
            },
          ],
        },
        true
      )

      this.graph = new Graph({
        interacting: false,
        container,
        panning: true,
        highlighting: {
          magnetAvailable: magnetAvailabilityHighlighter,
        },
        connecting: {
          snap: true,
          nodeMovable: false,
          allowBlank: false,
          allowLoop: false,
          allowNode: false,
          highlight: true,
        },
      })

      const newCellList = []
      this.X6List[0].cellList.map((v, i) => {
        const newCell = this.graph.addNode({
          x: v.x,
          y: v.y,
          width: 300,
          height: 60,
          shape: 'custom-node',

          data: {
            tableId: v.tableId,
            tableName: v.tableName,
          },
          attrs: {
            image: {
              opacity: 0.7,
              'xlink:href': 'https://img0.baidu.com/it/u=1042886901,3501250760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            },
            title: {
              text: v.tableName,
              fontSize: 13,
              fontFamily: 'Arial',
              letterSpacing: 0,
            },
            text: {
              text: v.tableDescription,
              fontSize: 13,
              fontFamily: 'Arial',
              letterSpacing: 0,
            },
          },
          // tools: [
          //   {
          //     name: 'button-remove',
          //     args: {
          //       distance: -80,
          //       onClick: (view) => {
          //         console.log(view, '--->removeItemorgin')

          //         // this.item = view.cell.animation.cell.store.data.data
          //         // this.removeItem(this.item)
          //         // this.listArrray.forEach((item, index) => {
          //         //   if (item.id == this.item.id) {
          //         //     this.listArrray.splice(index, 1)
          //         //   }
          //         // })
          //         // //TODO
          //         // this.getG6Echarts()

          //         const item = view.cell
          //         this.graph.removeNode(item.id)
          //         this.removeItem(item)
          //         // console.log(this.listArrray, 'remove List-->>')
          //       },
          //     },
          //   },
          // ],
          ports: {
            groups: {
              // 输入链接桩群组定义
              in: {
                position: 'top',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              // 输出链接桩群组定义
              out: {
                position: 'bottom',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              topLeft: {
                position: 'left',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
              bottomRight: {
                position: 'right',
                attrs: {
                  circle: {
                    r: 6,
                    magnet: true,
                    stroke: '#31d0c6',
                    strokeWidth: 2,
                    fill: '#fff',
                  },
                },
              },
            },
            items: [
              {
                id: 'port1',
                group: 'in',
              },
              {
                id: 'port2',
                group: 'in',
              },
              {
                id: 'port3',
                group: 'out',
              },
              {
                id: 'port4',
                group: 'out',
              },
              {
                id: 'port5',
                group: 'topLeft',
              },
              {
                id: 'port6',
                group: 'bottomRight',
              },
            ],
          },
        })
        newCellList.push(newCell)
        // console.log(newCellList, '~~~newCellListnewCellListnewCellList')
      })

      this.X6List[0].edgeList.forEach((item) => {
        newCellList.forEach((newCellItem) => {
          if (item.sourceId === newCellItem.data.tableId) {
            item.sourceCell = newCellItem.id
          }

          if (item.targetId === newCellItem.data.tableId) {
            item.targetCell = newCellItem.id
          }
        })
      })

      this.X6List[0].edgeList.map((v, i) => {
        this.graph.addEdge({
          source: { cell: v.sourceCell, port: v.sourcePort },
          target: { cell: v.targetCell, port: v.targetPort },
          label: v.edgeLabel,
        })
      })

      this.graph.on('node:click', (evt) => {
        let id = evt.node.getData().tableId
        this.meunsClick(id)
        this.drawer = true
      })
    },

    openCreate() {
      // this.addDialog = true
      this.$refs.createModel.on()
      this.$refs.createModel.getList()
    },
    closeNodeDraw(done) {
      done()
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done();
      //   })
      //   .catch(_ => {});
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    meunsClick(val) {
      this.nodeTablelist = []
      this.TableId = val
      deletecaveasmodelid({
        id: val,
      }).then((res) => {
        if (res.data.code == 200) {
          this.nodeTablelist = res.data.data.columnModelEntities
          this.titledatalanglis = res.data.data.tableComment
          this.openTitle = res.data.data.tableName
        }

        // debugger
        // todo 请求接口返回渲染模块
      })
    },
    // 清空画布的逻辑

    handleNodeClick(val) {
      console.log(val, '点击了树点击了数')
      this.toAdd = val
      ;(this.title = val.label), (this.id = val.modelId)
      this.id1 = val.id
      if (val.isDirectory == '1') {
        this.listQuery.modelId = val.modelId
        this.getList()
      }
      // this.clearGraph()
    },
    getTreeList() {
      this.listLoading = true
      fetchMasterdataDirectoryList(this.listQuery).then((response) => {
        if (response.data.code == 200) {
          this.treeList = response.data.data
          if (this.treeList.length > 0) {
            this.listQuery.directoryId = this.treeList[0].id
            this.currentNodekey = this.treeList[0].children[0].id
            this.handleNodeClick(this.treeList[0].children[0])
            this.$nextTick(() => {
              this.$refs.SlotTree.setCurrentKey(this.currentNodekey) //一定要加这个选中了否则样式没有出来
            })
          }
          this.listLoading = false
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },

    getLabelList() {
      this.listLoading = true
      fetchMetadataLabelGroupList(this.listQuery).then((response) => {
        if (response.data.code === 0) {
          this.labelList = response.data.data
          this.listLoading = false
          this.$refs.form.setList(this.labelList)
        } else {
          this.$message.error(response.data.msg)
        }
        this.listLoading = false
      })
    },
    //编辑实体按钮
    handleEdit(_node, _data) {
      // 编辑节点
      console.log(_node, _data)
      let obj = {
        id: _data.id,
        parentId: _data.parentId,
        name: _data.name,
        description: _data.description,
      }
      this.$refs.treeForm.handleUpdate(obj, 17)
      // // 设置编辑状态
      if (!_node.isEdit) {
        this.$set(_node, 'isEdit', true)
      }

      // 输入框聚焦
      this.$nextTick(() => {
        if (this.$refs['slotTreeInput' + _data[this.NODE_KEY]]) {
          this.$refs['slotTreeInput' + _data[this.NODE_KEY]].$refs.input.focus()
        }
      })
    },
    //定义实体按钮
    handleCreate() {
      if (this.listQuery.sourceId) {
        this.entityQuery.tableId = this.listQuery.sourceId
        this.$refs.entityform.setList(this.entityQuery)
        this.$refs.entityform.handleCreate()
      } else {
        this.$message.warning('请先选择表')
      }
      // this.$refs.entityform.setList(this.labelList)
    },
    //查看实体按钮
    handleCheck() {
      if (this.listQuery.sourceId) {
        this.entityQuery.tableId = this.listQuery.sourceId
        this.$refs.entityList.setList(this.entityQuery)
        this.$refs.entityList.handleCheck()
      } else {
        this.$message.warning('请先选择表')
      }
    },
    load(tree, treeNode, resolve) {
      resolve(tree.children)
    },
    getListByTreeId(data) {},
    getList() {
      this.edges = []
      this.nodes = []
      this.listLoading = true
      fieldRelation({ modelId: this.listQuery.modelId }).then((response) => {
        this.X6List = response.data.rows[0].x6List
        this.editX6List = response.data.rows
        this.getG6Echarts()
        this.listLoading = false
      })
    },
    //   // //获取节点详情
    getRelationDetail(id) {
      this.listLoading = true
      getFieldRelationDetail(id).then((res) => {
        // this.list = response.data.data
        console.log('节点详情数据=' + JSON.stringify(res))
        this.nodeTableInfo = res.data.data.columnModelEntities
        this.openTableTitle = res.data.data.tableName
      })
    },
    //获取连线详情
    getEdgeRelationDetail(id) {
      this.listLoading = true
      getFieldRelationEdgeDetail(id).then((res) => {
        // this.list = response.data.data
        console.log('节点详情数据=' + JSON.stringify(res))
        this.nodeTableInfo = res.data.data.columnModelEntities
        this.openTableTitle = res.data.data.tableName
      })
    },

    editpeizhimodel() {
      if (this.listQuery.modelId) {
        this.$router.push({
          path: `/metadata/metaModel/core/ConfigurationRelationships/${this.id}`,
          query: {
            editX6List: this.editX6List,

            type: 'edit',
            nodes: this.nodelist,
            list: this.x6List,
            edges: this.edges,
            modelId: this.listQuery.modelId,
          },
        })
      } else {
        this.$message.error('请选择目录')
      }
    },

    //   handleUpdate(row) {
    //     this.$refs.form.setList(this.labelList)
    //     this.$refs.form.handleUpdate(row.id)
    //   },
    //   handleUpdate1(row) {
    //     this.$confirm('确定解除标签绑定吗?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       const data = row
    //       data.labelId = ''
    //       updatecolumn(data).then(response => {
    //         this.loading = false
    //         if (response.data.code === 0) {
    //           this.dialogFormVisible = false
    //           this.getList()
    //           this.$message.success(response.data.msg)
    //         } else {
    //           this.$message.error(response.data.msg)
    //         }
    //       })
    //     })
    //   },
    //   handleDelete(row) {
    //     this.$confirm('确定删除该数据吗?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       deletecolumn(row.id).then(response => {
    //         if (response.data.code === 0) {
    //           this.getList()
    //           this.$message.success(response.data.msg)
    //         } else {
    //           this.$message.error(response.data.msg)
    //         }
    //       })
    //     })
    //   },
    //   handleSelectionChange(val) {
    //     this.multipleSelection = val
    //   },
    //   handleBathDelete() {
    //     if (this.ids === '') {
    //       this.$message.warning('请选择至少一条数据')
    //       return
    //     }
    //     this.$confirm('确定删除所选数据吗?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       deletecolumn(this.ids).then(response => {
    //         if (response.data.code === 0) {
    //           this.getList()
    //           this.$message.success(response.data.msg)
    //         } else {
    //           this.$message.error(response.data.msg)
    //         }
    //       })
    //     })
    //   },
    //   handleImport() {
    //     this.$refs.import.show()
    //   },
    //   handleExport() {
    //     if (this.ids === '') {
    //       this.$message.warning('请选择至少一条数据')
    //       return
    //     }
    //     this.downloadLoading = true
    //     exportcolumn(this.ids).then(response => {
    //       this.downloadLoading = true
    //       if (response.data.code === 0) {
    //         import('@/vendor/Export2Excel').then(excel => {
    //           excel.export_byte_to_excel(response.data.data.bytes, response.data.data.title)
    //           this.downloadLoading = false
    //         })
    //       } else {
    //         this.$message.error(response.data.msg)
    //       }
    //     })
    //   },
    //   // setSort() {
    //   //   const el = this.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
    //   //   this.sortable = Sortable.create(el, {
    //   //     setData: function (dataTransfer) {
    //   //       // to avoid Firefox bug
    //   //       // Detail see : https://github.com/RubaXa/Sortable/issues/1012
    //   //       dataTransfer.setData('Text', '')
    //   //     },
    //   //     onEnd: evt => {
    //   //       const targetRow = this.list.splice(evt.oldIndex, 1)[0]
    //   //       this.list.splice(evt.newIndex, 0, targetRow)
    //   //       // TODO：这里完成自己的业务处理
    //   //     }
    //   //   })
    //   // },
    //   // handleFilter() {
    //   //   this.listQuery.page = 1
    //   //   this.getList()
    //   // },
    // setNodes() {
    //   alert('23')
    //   console.log('===' + JSON.stringify(this.nodes))
    //   console.log('===2' + JSON.stringify(this.edges))
    //   const container = this.$refs.graphContainer
    //   const width = container.offsetWidth
    //   const height = container.offsetHeight

    //   const data = {
    //     nodes: this.nodes,
    //     edges: this.edges,
    //   }
    //   if (this.graph) {
    //     this.graph.destroy()
    //   }
    //   this.graph = new G6.Graph({
    //     container,
    //     width,
    //     height,
    //     layout: {
    //       type: 'force',

    //       preventOverlap: true, // 防止节点重叠
    //       linkDistance: 300, // 设置节点之间的距离
    //       nodeSpacing: 100,
    //       nodeStrength: 500, // 节点之间的吸引力
    //       edgeStrength: 0.1, // 边之间的斥力
    //       minMovement: 0.001, // 布局运动的最小阈值
    //       // 其他布局参数...
    //       minComboEdgeDistance: 10, // 设置组合节点之间的最小边距
    //       focusNode: 'node1', // 设置一个焦点节点
    //       preventComboOverlap: true, // 防止组合节点重叠
    //       // linkDistance: (d) => {
    //       //   if (d.source.id === 'node0') {
    //       //     return 100;
    //       //   }
    //       //   return 30;
    //       // },
    //       // nodeStrength: (d) => {
    //       //   if (d.isLeaf) {
    //       //     return -50;
    //       //   }
    //       //   return -10;
    //       // },
    //       // edgeStrength: (d) => {
    //       //   if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
    //       //     return 0.7;
    //       //   }
    //       //   return 0.1;
    //       // },
    //     },
    //     // defaultNode: {
    //     //   color: '#5B8FF9',
    //     // },
    //     modes: {
    //       // default: ['drag-canvas'],
    //       default: ['drag-canvas', 'drag-node', 'zoom-canvas'],
    //     },

    //     defaultNode: {
    //       type: 'modelRect',
    //       size: [270, 80],
    //       // size: 60,
    //       color: '#5B8FF9',
    //       style: {
    //         radius: 5,
    //         stroke: '#69c0ff',
    //         fill: '#ffffff',
    //         lineWidth: 1,
    //         fillOpacity: 1,
    //       },
    //       labelCfg: {
    //         style: {
    //           fill: '#595959',
    //           fontSize: 14,
    //         },
    //         offset: 30,
    //       },
    //       preRect: {
    //         show: true,
    //         width: 4,
    //         fill: '#40a9ff',
    //         radius: 2,
    //       },
    //       // configurations for the four linkpoints
    //       linkPoints: {
    //         top: false,
    //         right: false,
    //         bottom: false,
    //         left: false,
    //         // the size of the linkpoints' circle
    //         size: 10,
    //         lineWidth: 1,
    //         fill: '#72CC4A',
    //         stroke: '#72CC4A',
    //       },
    //       // configurations for the icon
    //       logoIcon: {
    //         // whether to show the icon
    //         show: true,
    //         x: 0,
    //         y: 0,
    //         // the image url for the icon, string type
    //         img: 'https://gw.alipayobjects.com/zos/basement_prod/4f81893c-1806-4de4-aff3-9a6b266bc8a2.svg',
    //         width: 16,
    //         height: 16,
    //         // adjust the offset along x-axis for the icon
    //         offset: 0,
    //       },
    //       // configurations for state icon
    //       stateIcon: {
    //         // whether to show the icon
    //         show: true,
    //         x: 0,
    //         y: 0,
    //         // the image url for the icon, string type
    //         img: 'https://gw.alipayobjects.com/zos/basement_prod/300a2523-67e0-4cbf-9d4a-67c077b40395.svg',
    //         width: 16,
    //         height: 16,
    //         // adjust hte offset along x-axis for the icon
    //         offset: -5,
    //       },
    //       // style: {
    //       //   fill: 'lightblue',
    //       //   stroke: 'blue',
    //       // },
    //     },
    //     nodeStateStyles: {
    //       hover: {
    //         fill: 'blue',
    //       },
    //     },
    //   })
    //   const nodes = data.nodes
    //   this.graph.data({
    //     nodes,
    //     edges: data.edges.map(function (edge, i) {
    //       edge.id = 'edge' + i
    //       return Object.assign({}, edge)
    //     }),
    //   })
    //   this.graph.render()
    //   this.graph.on('node:dragstart', function (e) {
    //     this.graph.layout()
    //     refreshDragedNodePosition(e)
    //   })
    //   this.graph.on('node:drag', function (e) {
    //     refreshDragedNodePosition(e)
    //   })
    //   this.graph.on('node:dragend', function (e) {
    //     e.item.get('model').fx = null
    //     e.item.get('model').fy = null
    //   })
    //   this.graph.on('node:click', (evt) => {
    //     const node = evt.item // 获取被点击的节点
    //     console.log('Node clicked:', node.getModel())
    //     this.getRelationDetail(node.getModel().id)
    //     this.nodeDrawer = true
    //   })
    //   this.graph.on('edge:click', (evt) => {
    //     const edge = evt.item // 获取被点击的边
    //     console.log('Edge clicked1:===' + JSON.stringify(edge.getModel()))
    //     console.log('Edge clicked2:===', edge.getModel().relationId)
    //     this.list
    //     this.edgesRelation = this.list.records.filter((item) => item.id === edge.getModel().relationId)
    //     console.log(JSON.stringify(this.edgesRelation))
    //     var priObj = {
    //       relationType: '主表',
    //       tableName: this.edgesRelation[0].primaryTablename,
    //       priKey: this.edgesRelation[0].primaryFieldname,
    //     }
    //     var sceObj = {
    //       relationType: '次表',
    //       tableName: this.edgesRelation[0].secondaryTablename,
    //       priKey: this.edgesRelation[0].secondaryFieldname,
    //     }
    //     this.edgeInfo = []
    //     this.edgeInfo.push(priObj)
    //     this.edgeInfo.push(sceObj)
    //     this.edgeDrawer = true
    //     // this.getEdgeRelationDetail(edge.getModel().relationId)
    //     // 执行你的自定义操作，例如弹出信息框或导航到相关页面
    //   })
    //   if (typeof window !== 'undefined') {
    //     window.onresize = () => {
    //       if (!graph || graph.get('destroyed')) return
    //       if (!container || !container.scrollWidth || !container.scrollHeight) return
    //       graph.changeSize(container.scrollWidth, container.scrollHeight)
    //     }
    //   }

    //   function refreshDragedNodePosition(e) {
    //     const model = e.item.get('model')
    //     model.fx = e.x
    //     model.fy = e.y
    //   }

    //   graph.data(data)
    //   graph.render()
    // },
  },
}
</script>
<style lang="scss" scoped></style>
